<template>
  <!-- <div class="refresh-image flex-h flex-vc flex-hc"> -->
  <img
    src="../../assets/refresh.png"
    class="refresh-image"
    :class="getRefreshAnimation"
    ref="refresh"
  >
  <!-- </div> -->
</template>

<script>
export default {
  name: 'RefreshImg',
  components: {

  },
  props: {
    // 传入的函数的return必须是一个Promise
    afterStartRefresh: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      isRefreshing: false,
      /**
       * 刷新按钮动画开始时间
       */
      animationStartTime: null,
      refreshAnimation: 'end' // 动画的阶段：start(开始)|process(进行中)|ending(结束中)|end(结束),
    }
  },
  computed: {
    /**
     * 动画状态改变时，返回对应的class名
     */
    getRefreshAnimation() {
      let animation = 'refresh-image-animation'
      switch (this.refreshAnimation) {
        case 'start':
          animation += '-start'
          break
        // case 'process':
        //   animation += '-process'
        //   break
        case 'ending':
          animation += '-ending'
          break
        case 'end':
          // animation += '-end'
          break
        default:
          // animation = null
          break
      }
      return animation
    }
  },
  methods: {
    // 开始刷新动画，供外部调用
    startRefresh() {
      if (!this.isRefreshing) {
        this.isRefreshing = true
        this.changeAnimationState(true)
        if (this.afterStartRefresh) {
          this.afterStartRefresh().then(() => {
            this.changeAnimationState()
          }).catch(() => {
            this.changeAnimationState()
          })
        }
      }
    },
    /**
     * 动画状态修改
     */
    changeAnimationState(isStart = false) {
      // 开始状态
      if (isStart) {
        // 记录开始时间
        this.animationStartTime = new Date().getTime()
        this.refreshAnimation = 'start'
        return
      }
      let nowTime = new Date().getTime()
      // 经过时间，当前时间减去开始时间减去开始动画的600毫秒
      let intervalTime = nowTime - this.animationStartTime - 600
      if (intervalTime <= 0) {
        // 经过时间小于0，开始动画未执行完
        setTimeout(() => {
          // 设置剩余时间计时器，设置结束状态
          this.refreshAnimation = 'ending'
          setTimeout(() => {
            // 结束动画结束，这是完成状态
            this.animationStartTime = null
            this.isRefreshing = false
            this.refreshAnimation = 'end'
          }, 600)
        }, Math.abs(intervalTime))
      } else {
        // 经过时间大于0，开始动画执行完毕
        setTimeout(() => {
          // 设置经过时间的300余数计时器，反正中间动画没有执行完一圈导致动画闪现的现象
          this.refreshAnimation = 'ending'
          setTimeout(() => {
            this.animationStartTime = null
            this.isRefreshing = false
            this.refreshAnimation = 'end'
          }, 600)
        }, 300 - (intervalTime % 300))
      }
    }
  }
}
</script>
<style scoped>
/* 获取支付方式失败后展示的刷新图标的动画 */
.refresh-image {
  transform: translate3d(0, 0, 0);
  width: 30px;
  height: 30px;
}
.refresh-image-animation-start {
  animation: refreshRotate 0.6s ease-in 1 forwards,
    refreshRotateProcess 0.3s linear infinite 0.6s forwards;
}
@keyframes refreshRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
/* .refresh-image-animation-process {
  animation: refreshRotate 0.6s ease-in 1 forwards,
    refreshRotateProcess 0.3s linear infinite 0.6s forwards;
}
@keyframes refreshRotateProcess {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotateZ(360deg);
    }
  } */
.refresh-image-animation-ending {
  animation: refreshRotateEnd 0.6s ease-out 1;
}
@keyframes refreshRotateEnd {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
</style>
